import BaseChart from './baseChart'

//分析图
export default class AnalysisChart extends BaseChart {
    radius = 100
    textRadius = [136, 150, 120, 120, 150]
    intervalAngle = 360 / 5
    score: number[] = []
    pointArr = [0, 0, 0, 0, 0]
    timer = 0
    speed = 1
    defaultAngle = 50
    scale = 1
    polygonArr = [100, 100, 100, 100, 100]
    text = ['内阻', '温度一致性', '电压一致性', '自放电率', '容量保持率']
    constructor(eleName: string, score: number[]) {
        super(eleName)
        this.score.length = 0
        this.score.push(...score)
        console.log('score', score)

        this.radius = this.calculateRatio(100)
        this.draw(this.ctx)
        this.ctx.save()
        this.ctx.translate(this.w_Width / 2, this.w_Height / 2)
        this.drawAnalysis()
        this.ctx.restore()
        // setTimeout(() => {
        //     this.animate()
        // }, 2000)
    }
    draw(ctx: CanvasRenderingContext2D) {
        ctx.clearRect(0, 0, this.w_Width, this.w_Height)
        //中心
        ctx.beginPath()
        ctx.arc(this.w_Width / 2, this.w_Height / 2, 2, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()

        this.drawLine(ctx, 0)
        this.drawLine(ctx, 1)
        this.drawLine(ctx, 2)
        this.drawLine(ctx, 3)
        this.drawLine(ctx, 4)

        this.drawPoint(ctx, 0)
        this.drawPoint(ctx, 1)
        this.drawPoint(ctx, 2)
        this.drawPoint(ctx, 3)
        this.drawPoint(ctx, 4)

        this.drawPolygon()
    }
    drawPoint(ctx: CanvasRenderingContext2D, index: number) {
        const r = this.calculateRatio(this.textRadius[index])

        //小于80分为异常
        let abnormal = false
        if (this.score[index] < 80) {
            abnormal = true
        }
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.font = this.calculateRatio(15) + 'px Microsoft YaHei'

        ctx.beginPath()
        ctx.save()
        ctx.fillStyle = abnormal ? '#ff5448' : '#666666'
        ctx.translate(this.w_Width / 2, this.w_Height / 2)
        ctx.fillText(
            this.score[index] + '',
            r * Math.cos(((this.intervalAngle * index - 90) * Math.PI) / 180),
            r * Math.sin(((this.intervalAngle * index - 90) * Math.PI) / 180)
        )

        ctx.restore()
        ctx.closePath()

        ctx.beginPath()
        ctx.save()
        ctx.fillStyle = abnormal ? '#ff5448' : '#333333'
        ctx.translate(this.w_Width / 2, this.w_Height / 2)
        ctx.fillText(
            this.text[index] + '',
            r * Math.cos(((this.intervalAngle * index - 90) * Math.PI) / 180),
            r * Math.sin(((this.intervalAngle * index - 90) * Math.PI) / 180) + this.calculateRatio(18)
        )
        ctx.restore()
        ctx.closePath()
    }

    drawLine(ctx: CanvasRenderingContext2D, index: number) {
        ctx?.beginPath()
        ctx?.save()
        ctx.strokeStyle = '#83FA9D'
        ctx.lineWidth = this.calculateRatio(1)
        ctx?.translate(this.w_Width / 2, this.w_Height / 2)
        ctx?.rotate(this.intervalAngle * index * (Math.PI / 180))
        ctx?.moveTo(0, -this.radius)
        ctx?.lineTo(0, 0)
        ctx?.stroke()
        ctx?.restore()
        ctx?.closePath()
    }
    drawAnalysis() {
        this.ctx.beginPath()
        this.ctx.save()
        for (let i = 0; i < this.score.length; i++) {
            if (i === 0) {
                this.ctx.moveTo(
                    this.calculateRatio(this.score[i]) * Math.cos(((this.intervalAngle * i - 90) * Math.PI) / 180),
                    this.calculateRatio(this.score[i]) * Math.sin(((this.intervalAngle * i - 90) * Math.PI) / 180)
                )
            } else {
                this.ctx.lineTo(
                    this.calculateRatio(this.score[i]) * Math.cos(((this.intervalAngle * i - 90) * Math.PI) / 180),
                    this.calculateRatio(this.score[i]) * Math.sin(((this.intervalAngle * i - 90) * Math.PI) / 180)
                )
            }
        }

        this.ctx.fillStyle = '#39BF56'
        this.ctx.fill()
        this.ctx.restore()
        this.ctx.closePath()
    }
    drawPolygon() {
        this.ctx.beginPath()
        this.ctx.save()
        this.ctx.lineWidth = this.calculateRatio(1)
        this.ctx.strokeStyle = '#83FA9D'
        this.ctx.translate(this.w_Width / 2, this.w_Height / 2)
        for (let i = 0; i < this.score.length; i++) {
            if (i === 0) {
                this.ctx.moveTo(
                    this.calculateRatio(this.polygonArr[i]) * Math.cos(((this.intervalAngle * i - 90) * Math.PI) / 180),
                    this.calculateRatio(this.polygonArr[i]) * Math.sin(((this.intervalAngle * i - 90) * Math.PI) / 180)
                )
            } else {
                this.ctx.lineTo(
                    this.calculateRatio(this.polygonArr[i]) * Math.cos(((this.intervalAngle * i - 90) * Math.PI) / 180),
                    this.calculateRatio(this.polygonArr[i]) * Math.sin(((this.intervalAngle * i - 90) * Math.PI) / 180)
                )
            }
        }
        this.ctx.lineTo(
            this.calculateRatio(this.polygonArr[0]) * Math.cos(((this.intervalAngle * 0 - 90) * Math.PI) / 180),
            this.calculateRatio(this.polygonArr[0]) * Math.sin(((this.intervalAngle * 0 - 90) * Math.PI) / 180)
        )

        this.ctx.stroke()
        this.ctx.restore()
        this.ctx.closePath()
    }
    animate = () => {
        this.draw(this.ctx)
        this.timer = window.requestAnimationFrame(this.animate)
        if (this.scale >= 1) {
            this.scale = 1
        }
        this.ctx.save()
        this.ctx.translate(this.w_Width / 2, this.w_Height / 2)
        this.ctx.scale(this.scale, this.scale)
        this.drawAnalysis()
        this.ctx.restore()

        if (this.defaultAngle <= 5) {
            this.defaultAngle = 5
        } else {
            this.defaultAngle -= 1
        }

        this.speed = Math.sin(this.defaultAngle * (Math.PI / 180))

        if (this.scale >= 1) {
            console.log(this.pointArr)
            this.scale = 1
            window.cancelAnimationFrame(this.timer)
        } else {
            this.scale += 0.05 * this.speed
        }
    }
}
